<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台管理</title>
  <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <script src="../js/vue.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <style>
    body {
      margin: 0;
    }

    a {
      text-decoration: none;
    }

    .logo {
      height: 50px;
      float: left;
      padding: 20px 0 0 15px;
    }

    .logo-lg {
      font-size: 1.5em;
      color: white;
      font-weight: bold;
    }

    .avatar-wrapper img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      vertical-align: middle;
    }

    .right-menu {
      float: right;
      padding: 18px 30px 0 0;
      color: #fff;
    }

    .el-dropdown {
      color: #fff;
    }
    .el-menu{
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container style="height: 100vh; border: 1px solid #eee;">
      <el-header class="main-header" style="height: 70px;background: linear-gradient(to right, #0abdfe,#67f0e0);">
        <nav class="navbar navbar-static-top" :class=''>
          <!-- Logo -->
          <a href="#" class="logo" style="text-align:center">
            <span class="logo-lg">izuhao 服务器后台管理</span>
          </a>
          <div class="right-menu">
            <span class="help"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>帮助</span>
            <el-dropdown class="avatar-container right-menu-item" trigger="click">
              <div class="avatar-wrapper">
                <img src="../img/head_img.png" class="user-avatar">
                <!--                            {{username}}-->
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided>
                  <span style="display:block;" @click="handlePwdUpdate()">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <a href="/logout"><span style="display:block;">退出</span></a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </nav>
        <!-- 修改密码标签弹层 -->
        <div class="add-form">
          <el-dialog title="修改密码" :visible.sync="dialogFormVisiblePwd">
            <el-form ref="dataPwdForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
              <el-row>
                <el-col>
                  <el-form-item prop="password">
                    <el-input type="password" v-model="formData.password" auto-complete="off"
                      placeholder="密码"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item prop="confirmPassword">
                    <el-input type="password" v-model="formData.confirmPassword" auto-complete="off"
                      placeholder="确认密码"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisiblePwd = false">取消</el-button>
              <el-button type="primary" @click="handlePwd()">确定</el-button>
            </div>
          </el-dialog>
        </div>

      </el-header>
      <el-container>
        <el-aside width="200px" >
          <el-menu :default-active="activeMenu" @select="handleMenuSelect">
            <el-submenu v-for="menu in menuList" :index="menu.path">
              <template slot="title">
                <i class="fa" :class="menu.icon"></i>
                {{menu.title}}
              </template>
              <template v-for="child in menu.children">
                <el-menu-item :key="child.path" :index="child.path" @click="updateIframe(child.linkUrl)">
                  <span>{{child.title}}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main style="margin: 0;padding: 0;">
            <iframe name="right" style="margin: 0;padding: 0;" src="items.html" width="100%" height="99%"
              frameborder="0"></iframe>
          </el-main>
          <el-footer
            style="color: #333; text-align: center; line-height: 60px;">izuhao</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>


  <script>
    new Vue({
      el: '#app',
      data() {
        const validateConfirmPassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入确认密码'));
          } else if (value !== this.formData.password) {
            callback(new Error('两次输入的密码不一致'));
          } else {
            callback();
          }
        };

        return {
          dialogFormVisiblePwd: false,
          rules: {
            password: [{ required: true, message: "请输入密码", trigger: "blur" }],
            confirmPassword: [
              { required: true, message: "请输入确认密码", trigger: "blur" },
              { validator: validateConfirmPassword, trigger: "blur" }
            ]
          },
          formData: {},
          username: "",
          menuList: [
            {
              path: "1",
              title: "权限管理",
              icon: "fa-user-md",
              children: [
                {
                  path: "/1-1",
                  title: "用户管理",
                  linkUrl: "users.html",
                  children: []
                }
              ]
            },
            {
              path: "2",
              title: "游戏管理",
              icon: "fa-shopping-cart",
              children: [
                {
                  path: "/2-1",
                  title: "游戏管理",
                  linkUrl: "items.html",
                  children: []
                },
              ]
            },
            {
              path: "3",
              title: "账号管理",
              icon: "fa-shopping-cart",
              children: [
                {
                  path: "/3-1",
                  title: "账号管理",
                  linkUrl: "orders.html",
                  children: []
                },
              ]
            },
            {
              path: "4",
              title: "公告管理",
              icon: "fa-bullhorn",
              children: [
                {
                  path: "/4-1",
                  title: "公告管理",
                  linkUrl: "announcement.html",
                  children: []
                },
              ]
            },
            {
              path: "5",
              title: "租用管理",
              icon: "fa-shopping-cart",
              children: [
                {
                  path: "/5-1",
                  title: "租用历史",
                  linkUrl: "rental.html",
                  children: []
                },
              ]
            },
            {
              path: "6",
              title: "兑换码管理",
              icon: "fa-shopping-cart",
              children: [
                {
                  path: "/6-1",
                  title: "兑换管理",
                  linkUrl: "redeem_codes.html",
                  children: []
                },
              ]
            }
          ],
          activeMenu: '/2-1'
        };
      },
      methods: {
        // 弹出编辑窗口
        handlePwdUpdate() {
          this.formData = {};
          this.dialogFormVisiblePwd = true;
        },
        // 修改密码
        handlePwd() {
          this.$refs.dataPwdForm.validate((valid) => {
            if (valid) {
              axios.post("/com/updatePwd?password=" + this.formData.confirmPassword).then((res) => {
                console.log(res.data);
                if (res.data) {
                  this.$message({
                    message: '恭喜你，修改成功',
                    type: 'success'
                  });
                  this.dialogFormVisiblePwd = false;
                  this.findPage();
                }
              }).catch((error) => {
                if (error == "Error: Request failed with status code 403") {
                  this.$message.error("无操作权限");
                }
              });
            } else {
              console.log('表单验证失败');
              return false;
            }
          });
        },
        getUserInfo() {
          axios.post("/admin/user/userInfo").then((res) => {
            this.username = res.data;
          })
        },
        handleMenuSelect(index) {
          this.activeMenu = index;
        },
        updateIframe(linkUrl) {
          const iframe = document.querySelector('iframe[name="right"]');
          if (iframe) {
            iframe.src = linkUrl;
          }
          this.activeMenu = linkUrl;
        }
      },
      created() {
        // this.getUserInfo();
      }
    });
  </script>
</body>

</html>